<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天津国展WMTS服务展示地图 - 3857</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    projection.setExtent([13061224.702753073, 4721354.619165434, 13070120.686677072, 4729632.805283699]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    // console.log(projectionExtent);
    const centerX = (projectionExtent[0] + projectionExtent[2]) * 0.5;
    const centerY = (projectionExtent[1] + projectionExtent[3]) * 0.5;
    const origin = ol.proj.fromLonLat([117.33097779802539, 39.055557292249546]);

    const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = [
        34.74993720312109,
        17.374968601560546,
        8.687484300780273,
        4.343742150390137,
        2.1718710751950683,
        1.0859355375975341,
        0.5429677687987671,
        0.27148388439938353,
        0.13574194219969177,
        0.06787097109984588,
        0.03393548554992294,
        0.01696774277496147,
        0.008483871387480735,
        0.004241935693740368,
        0.002120967846870184,
        0.001060483923435092,
        5.30241961717546E-4
    ];
    const matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        extent: projectionExtent,
        matrixIds: matrixIds
    });

    const url = `https://emergency.ncectj.com:9999/iserver/services/map-TJGZ_wmts/wmts100`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'TJGZ',
        matrixSet: 'Custom_TJGZ',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    const centerPoint = ol.proj.transform([117.37703818942609, 39.024824176749576], 'EPSG:4326', 'EPSG:3857');

    const radius = 50;

    const iconPoint = [
        centerPoint[0] + radius,
        centerPoint[1]
    ];
    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(iconPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [15, 10],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/tuozhuai.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const drag = new ol.interaction.Translate({
        features: new ol.Collection([iconFeature])
    });


    const topLeftPoint = [projectionExtent[0], projectionExtent[3]];

    const topLeftIconFeature = new ol.Feature({
        geometry: new ol.geom.Point(topLeftPoint)
    });

    topLeftIconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            vectorLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 6,
            maxZoom: 19,
            minZoom: 1,
            resolutions
        })
    });

    const metersPerUnit = map.getView().getProjection().getMetersPerUnit();

    const realRadius = radius / metersPerUnit;

    const circleFeature = new ol.Feature({
        geometry: new ol.geom.Circle(centerPoint, realRadius)
    });

    vectorSource.addFeature(circleFeature);

    map.addInteraction(drag);

    drag.on('translatestart', (evt) => {
        // console.log('translatestart=====', evt);
    });

    drag.on('translating', (evt) => {
        const distance = getDistance(centerPoint, evt.coordinate);
        console.log('distance:', distance);
        const distanceOfLngLat = getDistanceOfLngLat(centerPoint, evt.coordinate);
        console.log('distanceOfLngLat:', distanceOfLngLat);
        circleFeature.getGeometry().setRadius(distanceOfLngLat);
    });

    drag.on('translateend', (evt) => {
        // console.log('translateend=====', evt);
        // circleFeature.getGeometry().setRadius(100);
    });

    const getDistance = (startPoint, endPoint) => {
        const dx = endPoint[0] - startPoint[0];
        const dy = endPoint[1] - startPoint[1];
        return Math.sqrt(dx * dx + dy * dy);
    };

    const getDistanceOfLngLat = (startPoint, endPoint) => {
        const startPointLngLat = ol.proj.transform(startPoint, 'EPSG:3857', 'EPSG:4326');
        const endPointLngLat = ol.proj.transform(endPoint, 'EPSG:3857', 'EPSG:4326');
        // console.log(startPointLngLat, endPointLngLat);

        const startLng = parseFloat(startPointLngLat[0]);
        const startLat = parseFloat(startPointLngLat[1]);
        const endLng = parseFloat(endPointLngLat[0]);
        const endLat = parseFloat(endPointLngLat[1]);
        const dx = endLng - startLng;
        const dy = endLat - startLat;
        return Math.sqrt(dx * dx + dy * dy) * 111320;
        // return Math.sqrt((start.lng - end.lng) * (start.lng - end.lng) + (start.lat - end.lat) * (start.lat - end.lat)) * 111320;
    };

</script>
</html>